<script setup lang="ts">
definePageMeta({ layout: 'admin' })
const demoData = reactive({
  input: '',
  radioGroup: '',
  datepicker: '',
  switch: true,
  calendar: new Date(),
  textarea: '',
})
</script>

<template>
  <AdminContainer>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="pb-6">
          <template #header>
            按钮组件
          </template>
          <el-row class="mb-4">
            <el-button>Default</el-button>
            <el-button type="primary">
              Primary
            </el-button>
            <el-button type="success">
              Success
            </el-button>
            <el-button type="info">
              Info
            </el-button>
            <el-button type="warning">
              Warning
            </el-button>
            <el-button type="danger">
              Danger
            </el-button>
          </el-row>

          <el-row class="mb-4">
            <el-button plain>
              Plain
            </el-button>
            <el-button type="primary" plain>
              Primary
            </el-button>
            <el-button type="success" plain>
              Success
            </el-button>
            <el-button type="info" plain>
              Info
            </el-button>
            <el-button type="warning" plain>
              Warning
            </el-button>
            <el-button type="danger" plain>
              Danger
            </el-button>
          </el-row>

          <el-row class="mb-4">
            <el-button round>
              Round
            </el-button>
            <el-button type="primary" round>
              Primary
            </el-button>
            <el-button type="success" round>
              Success
            </el-button>
            <el-button type="info" round>
              Info
            </el-button>
            <el-button type="warning" round>
              Warning
            </el-button>
            <el-button type="danger" round>
              Danger
            </el-button>
          </el-row>

          <el-row>
            <el-button circle>
              <AdminIcon name="i-ep-search" />
            </el-button>
            <el-button type="primary" circle>
              <AdminIcon name="i-ep-edit" />
            </el-button>
            <el-button type="success" circle>
              <AdminIcon name="i-ep-check" />
            </el-button>
            <el-button type="info" circle>
              <AdminIcon name="i-ep-message" />
            </el-button>
            <el-button type="warning" circle>
              <AdminIcon name="i-ep-star" />
            </el-button>
            <el-button type="danger" circle>
              <AdminIcon name="i-ep-delete" />
            </el-button>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            表单组件
          </template>
          <el-form label-width="80">
            <el-row>
              <el-col :span="12">
                <el-form-item label="姓名">
                  <el-input v-model="demoData.input" />
                </el-form-item>
                <el-form-item label="性别">
                  <el-radio-group v-model="demoData.radioGroup">
                    <el-radio label="男" />
                    <el-radio label="女" />
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="出生日期">
                  <el-date-picker v-model="demoData.datepicker" type="date" />
                </el-form-item>
                <el-form-item label="心情">
                  <el-switch v-model="demoData.switch"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #409eff" inline-prompt active-text="开心"
                    inactive-text="难过" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="简历">
                  <el-input v-model="demoData.textarea" type="textarea" :rows="8" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
    <el-row class="pt-6">
      <el-card>
        <template #header>
          日历组件
        </template>
        <el-calendar v-model="demoData.calendar" />
      </el-card>
    </el-row>
  </AdminContainer>
</template>

<style scoped>
:deep(.el-card) {
  box-shadow: var(-el-box-shadow-lighter);
}
</style>
